<template>
  <div class="useradmin">
    <div class="top">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>管理员用户管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main">
      <div class="search">
        <el-form :inline="true" :model="pagelistquery" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="pagelistquery.user" placeholder="账号模糊查找"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="pagelistquery.state" placeholder="账号状态">
              <el-option label="启用" value="1"></el-option>
              <el-option label="停用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getAdminList">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :disabled="uinfo.username!=='admin'" @click="dialogFormVisibleadd=true">添加账号</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-dialog title="添加新的账号" :visible.sync="dialogFormVisibleadd" width="500px">
        <el-form :model="form">
          <el-form-item label="账号" label-width="100px">
            <el-input v-model="user.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" label-width="100px">
            <el-input type="password" v-model="user.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" label-width="100px">
            <el-input type="password" v-model="user.password1" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleadd = false">取 消</el-button>
          <el-button type="primary" @click="registered">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="输入新的密码" :visible.sync="dialogpw" width="500px">
        <el-form :model="changepassword">
          <el-form-item label="账号" label-width="100px">{{changepassword.username}}</el-form-item>
          <el-form-item label="新密码" label-width="100px">
            <el-input v-model="changepassword.newpassword" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogpw = false">取 消</el-button>
          <el-button type="primary" @click="change">确 定</el-button>
        </div>
      </el-dialog>
      <el-table
        :data="tableData"
        border
        style="width: 100%;min-height:500px"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column prop="username" label="账号"></el-table-column>
        <el-table-column prop="nickname" label="昵称"></el-table-column>
        <el-table-column prop="nickname" label="审核中心">
          <template slot-scope="scope">
            <el-switch
              @change="changestate(scope.row)"
              :disabled="scope.row.username == 'admin'"
              v-model="scope.row.issh"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="用户管理">
          <template slot-scope="scope">
            <el-switch
              @change="changestate(scope.row)"
              :disabled="scope.row.username == 'admin'"
              v-model="scope.row.isyh"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="网站管理中心">
          <template slot-scope="scope">
            <el-switch
              @change="changestate(scope.row)"
              :disabled="scope.row.username == 'admin'"
              v-model="scope.row.isgl"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="反馈中心">
          <template slot-scope="scope">
            <el-switch
              @change="changestate(scope.row)"
              :disabled="scope.row.username == 'admin'"
              v-model="scope.row.isfk"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="账号状态">
          <template slot-scope="scope">
            <el-switch
              @change="changestate(scope.row)"
              :disabled="scope.row.username == 'admin'"
              v-model="scope.row.user_state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" fixed="right" label="操作" width="170">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.username == 'admin'"
              @click="deleteuser(scope.row)"
            >删除</el-button>
            <el-button
              type="text"
              size="small"
              @click="changepw(scope.row)"
            >修改密码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagelistquery.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagelistquery.total"
        style="margin-top: 20px;"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'useradmin',
  data () {
    return {
      changepassword: {},
      dialogpw: false, // 密码框
      loading: false,
      dialogFormVisibleadd: false, // 添加弹框
      form: {},
      user: {
        username: '',
        password: '',
        password1: ''
      },
      pagelistquery: {
        total: 0,
        page: 1,
        pagesize: 10,
        user: '',
        state: ''
      },
      tableData: [] // 列表信息
    }
  },
  computed: {
    ...mapState({
      uinfo: state => state.uinfo
    })
  },
  methods: {
    registered () {
      const userReg = /^[1-9a-zA-Z]{1}[0-9a-zA-Z]{5,9}$/ // 6-10位字母数字
      const pwdReg = /^[1-9a-zA-Z]\w{5,17}$/ // 6-18位字母数字下划线，数字字母开头
      if (!userReg.test(this.user.username)) {
        this.$message.error('账号为6-10位字母数字字母')
        return
      }
      if (!pwdReg.test(this.user.password)) {
        this.$message.error('密码为6-18位字母数字或下划线')
        return
      }
      if (this.user.password !== this.user.password1) {
        this.$message.error('两次密码不相等')
        return
      }
      this.$axios.post('/admin/registered', this.qs.stringify(this.user))
        .then(result => {
          const data = result.data
          if (data.state.type !== 'SUCCESS') {
            if (data.state.type === 'ERROR_PARAMS_EXIST') {
              this.$message.error('账户名重复')
            } else {
              this.$message.error('账号添加失败失败')
            }
            return
          }
          this.$message.success('账号添加成功')
          this.dialogFormVisibleadd = false
          this.getAdminList()
        })
        .catch(e => {
          this.$message.error(e)
        })
      this.user.username = ''
      this.user.password = ''
      this.user.password1 = ''
    },
    async changestate (row) {
      console.log(row)
      if (this.uinfo.username !== 'admin') {
        this.$message.error('权限不足')
        return
      }
      const result = await this.$axios.post('/admin/changeadminstate', this.qs.stringify(row))
      if (result.data.state.type === 'SUCCESS') {
        this.$message.success('更改授权成功')
      }
    },
    changepw (row) {
      if (this.uinfo.username !== 'admin') {
        this.$message.error('权限不足')
        return
      }
      this.dialogpw = true
      const row1 = JSON.parse(JSON.stringify(row))
      this.changepassword = row1
    },
    // 修改密码
    async change () {
      if (this.changepassword.newpassword) {
        this.changepassword.type = 'adminadmin'
        const result = await this.$axios.post(
          '/admin/changepassword',
          this.qs.stringify(this.changepassword)
        )
        if (result.data.state.type === 'SUCCESS') {
          this.$message.success('修改成功')
          this.dialogpw = false
        }
      } else this.$message.error('密码不能为空')
    },
    // 删除用户
    async deleteuser (row) {
      if (this.uinfo.username !== 'admin') {
        this.$message.error('权限不足')
        return
      }
      const data = {
        user_id: row.user_id,
        usertype: 'admin'
      }
      const result = await this.$axios.post('/admin/deleteuser', this.qs.stringify(data))
      if (result.data.state.type === 'SUCCESS') {
        this.$message.success('删除成功')
        this.getAdminList()
      }
    },
    handleSizeChange (val) {
      this.pagelistquery.pagesize = val
      this.getAdminList()
    },
    handleCurrentChange (val) {
      this.pagelistquery.page = val
      this.getAdminList()
    },
    async getAdminList () {
      this.loading = true
      const result = await this.$axios.post('/admin/getadminlist', this.qs.stringify(this.pagelistquery))
      if (result.data.state.type === 'SUCCESS') {
        this.tableData = result.data.data
        console.log(result.data.data)
        this.pagelistquery.total = result.data.count
      }
      this.loading = false
    }
  },
  created () {
    this.getAdminList()
  }
}
</script>

<style scoped>
  .top {
    position: relative;
    top: 0;
    left: 0;
    width: calc(100% - 35px);
    padding: 12px 16px;
    background-color: #fff;
  }
  .main {
    margin-top: 40px;
    padding: 20px;
    background-color: #fff;
  }
</style>
